<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-axios的默认配置</title>
    <!-- 这样即可引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>

    <script>
        let btns = document.querySelectorAll('button');

        // 设置请求拦截器，请求拦截器会在请求发送之前对这个请求做一些处理
        axios.interceptors.request.use(config => {
            console.log('请求成功被拦截到');
            throw new Error('你这个参数有问题啊');
            return config;
        }, error => {
            console.log('请求拦截失败');
            return Promise.reject(error);
        });

        // 设置响应拦截器，响应拦截器会在响应到达之前对这个响应做一些处理
        axios.interceptors.response.use(response => {
            console.log('响应成功被拦截');
            // 很多时候我们只想要响应内容中的data属性，可以这样处理
            return response.data;
        }, error => {
            console.log('响应拦截失败');
            return Promise.reject(error);
        });
        btns[0].onclick = () => {
            axios.get('http://localhost:10086/demo/demoGet')
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.error('123123'+err);
                })
        }

        btns[1].onclick = () => {
            axios.post('http://localhost:10086/demo/demoPost', {
                    name: '123'
                })
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.error(err);
                })
        }
    </script>
</body>

</html>